<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/js/diyUpload/css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/js/diyUpload/css/diyUpload.css">


    <script type="text/javascript" src="__STATIC_URL__/static/js/diyUpload/js/webuploader.html5only.min.js"></script>
    <script type="text/javascript" src="__STATIC_URL__/static/js/diyUpload/js/diyUpload.js"></script>
    <style>
        #demo {
            margin: 50px auto;
            width: 540px;
            min-height: 800px;
            background: #CF9
        }

        #myTabContent .parentFileBox img {
            display: block;
            width: auto;
            height: auto;
            margin: auto;
        }
    </style>
</head>
<body>

{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>当前位置是&nbsp;:&nbsp;</li>
                <li><a href="#">小程序管理</a></li>
                <li class="active" style="color: #02b87f;"> 门店管理</li>
            </ul>
        </div>
        <div class="panel panel-default mgl15 mgr15">
            <div class="panel-body">

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="home">
                        <div class="alert alert-danger" role="alert">
                            请绑定授权绑定小程序后开始设置。以下参数请勿修改
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">小程序内容</h3>
                            </div>
                            <div class="panel-body">
                                <form class="form-horizontal adminex-form" action="" method="post" id="store_form"
                                      name="form"
                                      enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label class="col-sm-2 col-sm-2 control-label">门店图片：</label>
                                        <div class="col-sm-10">
                                            <input type="hidden" name="store_pic" value="{$pictures}" id="store_pic">
                                            <div id="box">
                                                <div id="test"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <style>
                                        .storeImg li{
                                            margin-right:15px;
                                            position: relative;
                                        }
                                        .storeImg img{
                                            width: 130px !important;
                                            height:130px !important;
                                        }
                                        .diyCancels{
                                            background: url(__STATIC_URL__/static/js/diyUpload/images/x_alt.png) no-repeat;
                                            position: absolute;
                                            width: 32px;
                                            height: 32px;
                                            top: 19px;
                                            right: 2px;
                                            cursor: pointer;
                                            display: none;
                                        }
                                        .storeImg li:hover .diyCancels{
                                            display: block;
                                        }
                                    </style>
                                    <div class="form-group">
                                        <label class="col-sm-2 col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                        <ul class="clearfix storeImg">
                                            <!--<li class="pull-left">-->
                                                <!--<div class="diyCancels"></div>-->
                                            <!--</li>-->
                                        </ul>
                                        </div>
                                    </div>
                                    <div style="text-align: center">
                                        <button type="button" id="tj" class="btn btn-primary">提交图片</button>
                                    </div>
                                </form>

                            </div>
                        </div>

                        <!--<div class="panel panel-default">-->
                            <!--<div class="panel-heading">-->
                                <!--<h3 class="panel-title">第二步：设置服务器域名</h3>-->
                            <!--</div>-->
                            <!--<div class="panel-body">-->


                            <!--</div>-->
                        <!--</div>-->

                    </div>
                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>

</body>
<script type="text/javascript">
    /*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader
*/

    $(function () {
        var picstr = "{$pictures}";
        var picarr = picstr.split(',');
        var html="";
        for(var i=0;i<picarr.length;i++){
            html+='<li class="pull-left">'
            +'<img src="'+picarr[i]+'"/>'
            +'<div class="diyCancels" data-index="'+i+'"></div>'
            +' </li>'
        }
        $(".storeImg").html(html);
        $(".diyCancels").click(function(){
           var index = $(this).attr('data-index');
           var nowarr = picarr.splice(index,1);
           var nowstr = picarr.toString();
           $(this).parent().remove();
           $("#store_pic").val(picarr)
        });
        $("#tj").click(function () {
            var val = $("#store_pic").val();
            if (val == "") {
                layer.alert("请上传图片");
                return true;
            } else {
                $("#store_form").submit();
            }
        });
        $('#test').diyUpload({
            url: "{:url('uploads/machuploads')}",
            success: function (data) {
                if (picstr == "") {
                    picstr += data.pic
                } else {
                    picstr += "," + data.pic
                }
                $("#store_pic").val(picstr);
            },
            error: function (err) {
                layer.alert("上传失败")
            }
        });
    })

</script>
</html>


